import { useEffect, useState } from 'react';
import { Form, Input, Switch, Select, Button } from 'antd';
import { selectByCode } from '@/api/dictEnums';
import CronEditor from './CronEditor';
import { cronParser } from '@/api/batchJob';
import { message } from 'antd';

const BatchJobForm = ({ form, isEditing }) => {
  const [errorStrategyOptions, setErrorStrategyOptions] = useState([]);
  const [result, setResult] = useState([]);
  const [showError, setShowError] = useState(false);
    // 解析cron表达式
  const gen = () => {
    const expression = form.getFieldValue('cron');
    cronParser(expression).then(res => {
      setShowError(false);
      setResult(res.data || []);
      if (res.data.length === 0) {
        message.info('请检查Cron表达式在未来有触发时间点');
      }
    }).catch(() => {
      setShowError(true);
      setResult([]);
    });
  };

  useEffect(() => {
    loadErrorStrategyOptions();
  }, []);

  const loadErrorStrategyOptions = () => {
    selectByCode({dictCode: "jobErrorProcessType"}).then(res => {
      setErrorStrategyOptions(res.data.values || []);
    });
  };

  return (
    <Form form={form} layout="vertical">
      {isEditing ? (
        <>
          <Form.Item name="id" label="任务ID" hidden>
            <Input />
          </Form.Item>
          <Form.Item name="name" label="任务名称" rules={[{ required: true, message: '请输入任务名称' }]}>
            <Input placeholder="请输入任务名称" />
          </Form.Item>
          <Form.Item name="jobGroup" label="任务分组" rules={[{ required: true, message: '请输入任务分组' }]}>
            <Input placeholder="请输入任务分组" />
          </Form.Item>
        </>
      ) : (
        <>
          <Form.Item name="name" label="任务名称" rules={[{ required: true, message: '请输入任务名称' }]}>
            <Input placeholder="请输入任务名称" />
          </Form.Item>
          <Form.Item name="jobGroup" label="任务分组" rules={[{ required: true, message: '请输入任务分组' }]}>
            <Input placeholder="请输入任务分组" />
          </Form.Item>
        </>
      )}
      <Form.Item name="bean" label="任务Bean" rules={[{ required: true, message: '请输入任务Bean' }]}>
        <Input placeholder="请输入任务Bean" />
      </Form.Item>
      <Form.Item name="cron" label="执行表达式" rules={[{ required: true, message: '请输入执行表达式' }]}>
          <CronEditor />
      </Form.Item>
      <div>
        <Button type="primary" onClick={gen}>解析前100次触发时间</Button>
        <div style={{ height: '150px', border: '1px solid #d9d9d9', padding: '10px', overflowY: 'auto',marginTop: '10px' }}>
          {showError && (
            <div style={{ color: 'red', textAlign: 'center', padding: '10px' }}>
              Cron表达式解析异常,请检查
            </div>
          )}
          {result.map((item, index) => (
            <div key={index} style={{ textAlign: 'center', padding: '5px' }}>
              {item}
            </div>
          ))}
        </div>
      </div>
      <Form.Item name="errorStrategy" label="执行异常后续策略">
        <Select placeholder="请选择错误策略">
          {errorStrategyOptions.map(item => (
            <Select.Option key={item.value} value={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="status" label="状态" valuePropName="checked">
        <Switch checkedChildren="启用" unCheckedChildren="停用" />
      </Form.Item>
      <Form.Item name="concurrent" label="并发执行" valuePropName="checked">
        <Switch checkedChildren="允许" unCheckedChildren="禁止" />
      </Form.Item>
      <Form.Item name="remark" label="备注">
        <Input.TextArea placeholder="请输入备注" rows={4} />
      </Form.Item>
    </Form>
  );
};

export default BatchJobForm;